<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 32 32"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="#0389FF" d="M25.729 1.887c1.365 0 2.4.4 3.104 1.2.704.8 1.056 1.776 1.056 2.928v16.992c0 .533-.224 1.013-.672 1.44l-5.344 5.12c-.278.234-.512.384-.704.448a2.368 2.368 0 0 1-.736.096H8.065a3.83 3.83 0 0 1-1.472-.304 4.124 4.124 0 0 1-1.312-.864 4.546 4.546 0 0 1-.944-1.344 4.054 4.054 0 0 1-.368-1.744V6.015c0-1.259.346-2.262 1.04-3.008.693-.747 1.68-1.12 2.96-1.12h17.76Zm-6.72 20.064a.958.958 0 0 0 .704-.288.958.958 0 0 0 .288-.704c0-.299-.096-.539-.288-.72a.987.987 0 0 0-.704-.272H8.993a.987.987 0 0 0-.704.272c-.192.181-.288.421-.288.72 0 .277.096.512.288.704a.958.958 0 0 0 .704.288h10.016Zm4-6.016a.957.957 0 0 0 .704-.288.958.958 0 0 0 .288-.704.958.958 0 0 0-.288-.704.957.957 0 0 0-.704-.288H8.993a.958.958 0 0 0-.704.288.958.958 0 0 0-.288.704c0 .277.096.512.288.704a.958.958 0 0 0 .704.288h14.016Zm1.984-5.984a.957.957 0 0 0 .704-.288.997.997 0 0 0 .288-.736.958.958 0 0 0-.288-.704.957.957 0 0 0-.704-.288h-16a.958.958 0 0 0-.704.288.958.958 0 0 0-.288.704c0 .298.096.544.288.736a.958.958 0 0 0 .704.288h16Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Security1 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
